<template>
  <div class="updateOut">
    <el-dialog
      title="修改客户数据"
      width="50%"
      :visible="showDialog"
      @close="clickClose"
      :close-on-click-modal="false"
    >

      <el-form
        :model="adduserForm"
        :rules="adduserRules"
        ref="adduserForm"
        label-width="100px"
        status-icon
      >
        <el-form-item label="客户名称" prop="nickname">
          <el-input v-model.trim="adduserForm.nickname"></el-input>
        </el-form-item>

        <el-form-item label="客户电话" prop="contact">
          <el-input v-model.trim="adduserForm.contact"></el-input>
        </el-form-item>

        <el-form-item label="QQ" prop="qq">
          <el-input v-model.trim="adduserForm.qq"></el-input>
        </el-form-item>

        <el-form-item label="微信" prop="weixin">
          <el-input v-model.trim="adduserForm.weixin"></el-input>
        </el-form-item>

        <el-form-item label="咨询专业" prop="zhuanye">
          <el-input placeholder="请输入内容" v-model.trim="adduserForm.zhuanye">
            <el-select
              v-model.trim="adduserForm.infoclass"
              slot="prepend"
              placeholder="请选择"
              class="mySelect"
            >
              <el-option
                :value="item.classname"
                v-for="item in infoClassList"
                :key="item.id"
              ></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="信息来源" prop="laiyuan">
          <el-input v-model.trim="adduserForm.laiyuan"></el-input>
        </el-form-item>

        <el-form-item label="选择客服" prop="kefu">
          <el-select
            v-model.trim="adduserForm.kefu"
            placeholder="请选择"
            multiple
          >
            <el-option
              :value="item.classname"
              v-for="item in kefuList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <div style="padding-top: 20px">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-button
                  type="success"
                  style="width: 100%; height: 50px"
                  @click="onUpdate"
                  >修改</el-button
                >
              </el-col>
              <el-col :span="3">
                <el-button style="width: 100%; height: 50px" @click="onReset"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { dataRules } from '@/assets/js/validator'
import { getKefuInfo, getRowUser, updateRowUser } from '@/network/networks'

export default {
  data () {
    return {
      showDialog: false,
      rowid: 0,
      kefuList: [],
      infoClassList: [],
      adduserForm: {
        nickname: '',
        contact: '',
        qq: '',
        weixin: '',
        laiyuan: '',
        kefu: [],
        zhuanye: '',
        infoclass: ''
      },

      adduserRules: {
        nickname: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        laiyuan: [
          { required: true, message: '请输入信息来源', trigger: 'blur' }
        ],
        zhuanye: [
          { required: true, message: '请输入专业名称', trigger: 'blur' }
        ],
        kefu: [
          { required: true, message: '请输入专业名称', trigger: 'change' }
        ],
        contact: [{ validator: dataRules, trigger: 'blur' }],

        qq: [{ validator: dataRules, trigger: 'blur' }],
        weixin: [{ validator: dataRules, trigger: 'blur' }]
      }
    }
  },

  methods: {
    clickClose () {
      window.sessionStorage.removeItem('userRes')
      this.showDialog = false
    },
    onUpdate () {
      this.$refs.adduserForm.validate(valid => {
        if (valid) {
          updateRowUser(this.adduserForm).then(res => {
            this.$message.success('更新数据')
            this.showDialog = false
            this.$parent.getAllData()
          })
        }
      })
    },
    onReset () {
      // this.$refs.adduserForm.resetFields();
      this.getUserFun()
    },
    getKFInfo () {
      getKefuInfo().then((res) => {
        this.kefuList = res.data.kefu
        this.showDialog = false

        this.infoClassList = res.data.infoclass
      })
    },
    getUserFun () {
      getRowUser(this.rowid).then(res => {
        console.log(res.data.results)

        this.$refs.adduserForm.resetFields()
        res.data.results.kefu = res.data.results.kefu.split('-')
        this.adduserForm = res.data.results

        const userRes = JSON.stringify(res.data.results)
        window.sessionStorage.setItem('userRes', userRes)
      })
    }

  },
  mounted () {
    this.getKFInfo()
    const userRes = window.sessionStorage.getItem('userRes')
    if (userRes) {
      window.sessionStorage.removeItem('userRes')
    }
  },
  watch: {
    rowid (val) {
      this.getUserFun()
    }

  }
}
</script>

<style>
.mySelect {
  width: 120px;
}
</style>
